<template>
	<view class="contenter-bg">
		<image :src="imgUrl + vote.image" v-if="vote.image" mode="widthFix" style="width: 100%;"
			@click="link(vote.link)" />
		<view style="padding: 20rpx 30rpx 30rpx;">
			<u-text :bold="true" :text="vote.name" align="center" size="20" lineHeight="50" color="#9C4E1D"></u-text>
			<u-row>
				<u-col span="3.3">
					<u-text :bold="true" :text="vote.person_count || 0" align="center" size="16" color="#9C4E1D">
					</u-text>
					<u-text text="已报名" align="center" size="12" color="#7A848B"></u-text>
				</u-col>
				<u-col span="1">
					<u-line direction="col" length="30" color="#979797"></u-line>
				</u-col>
				<u-col span="3.3">
					<u-text :bold="true" :text="vote.count || 0" align="center" size="16" color="#9C4E1D"></u-text>
					<u-text :text="'累计' + (vote.btn_txt || '投票')" align="center" size="12" color="#7A848B"></u-text>
				</u-col>
				<u-col span="1">
					<u-line direction="col" length="30" color="#979797"></u-line>
				</u-col>
				<u-col span="3.3">
					<u-text :bold="true" :text="vote.hit || 0" align="center" size="18" color="#9C4E1D"></u-text>
					<u-text text="访问量" align="center" size="12" color="#7A848B"></u-text>
				</u-col>
			</u-row>

			<view class="endTime-box">
				<block v-if="vote.down_time > 0 && timeData">
					<u-text text="距离活动结束" align="center" lineHeight="50"></u-text>
					<u-count-down :time="vote.down_time" format="DD:HH:mm:ss" @change="onChange">
						<view class="count-time">
							<text>{{ timeData.days }}</text>
							天
							<text>{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text>
							时
							<text>{{ timeData.minutes }}</text>
							分
							<text>{{ timeData.seconds }}</text>
							秒
						</view>
					</u-count-down>
				</block>
				<u-text text="活动已结束" align="center" lineHeight="100" v-else></u-text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<ad :unit-id="ad.vote_index" v-if="ad.vote_index" ad-intervals="30" style="margin-top: 10px;"></ad>
			<!-- #endif -->
			<view class="inputBox">
				<icon type="search" class="search-icon" size="15"></icon>
				<input v-model="keyword" class="searchinput" placeholder="请输入编号或名称" placeholder-class="inputpc" />
				<view @click.stop="serch" class="searchbtn">搜索</view>
			</view>

			<u-grid :border="false" col="4" v-if="vote.groups && vote.groups.length > 0" customStyle="margin-top:20px">
				<u-grid-item @click="select_group(-1)"><text class="grid-text"
						:class="group_id == -1 ? 'grid-text-active' : ''">全部</text></u-grid-item>
				<u-grid-item v-for="(item, index) in vote.groups" :key="index" @click="select_group(item.id)">
					<text class="grid-text"
						:class="group_id == item.id ? 'grid-text-active' : ''">{{ item.name }}</text>
				</u-grid-item>
			</u-grid>

			<u-row customStyle="margin-top: 10px" gutter="10" align="top">
				<u-col span="6" align="top">
					<view class="person" v-for="(item, index) in person" :key="index" v-if="index % 2 == 0"
						@click="goto('/pages/vote/person?person_id='+item.id)">
						<view class="person_code">{{ item.code }}号</view>
						<image class="person_image" :src="imgUrl + item.image" mode="widthFix"></image>
						<view class="person_footer">
							<u-text :text="item.count + '票'" color="#9c4e1d" lineHeight="20"></u-text>
							<u-text :text="item.name" lines="2" lineHeight="30"></u-text>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="person" v-for="(item, index) in person" :key="index" v-if="index % 2 != 0"
						@click="goto('/pages/vote/person?person_id='+item.id)">
						<view class="person_code">{{ item.code }}号</view>
						<image class="person_image" :src="imgUrl + item.image" mode="widthFix"></image>
						<view class="person_footer">
							<u-text :text="item.count + '票'" color="#9c4e1d" lineHeight="20"></u-text>
							<u-text :text="item.name" lines="2" lineHeight="30"></u-text>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				ad: 'common/ad',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		name: 'temp-qqsh',
		props: {
			vote: {
				type: Object,
				default: null
			},
			person: {
				type: Array,
				default: null
			}
		},
		data() {
			return {
				timeData: {},
				group_id: -1,
				keyword: '',
			};
		},
		mounted() {},
		watch: {
			person(person) {
				if (person) {
					this.person = person;
				}
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e;
			},
			link(link) {
				this.utils.link(link);
			},
			select_group(group_id) {
				this.group_id = group_id;
				this.$emit('updateData', {
					group_id: group_id
				});
			},
			serch() {
				this.$emit('updateData', {
					keyword: this.keyword
				});
			},
			goto(url) {
				this.utils.goto(url)
			}
		}
	};
</script>
<style lang="scss">
	.contenter-bg {
		width: 750rpx;
		min-height: 100vh;
		height: 100%;
		background-image: url('../static/img/qqsh.jpg');
		background-size: 100% 100%;
	}

	.endTime-box {
		background: #fff;
		border: 2rpx solid #9c4e1d;
		border-radius: 8rpx;
		margin-top: 20px;
		height: 100px;
		text-align: center;

		.count-time text {
			color: #9c4e1d;
			padding: 0 3px;
			font-weight: bold;
		}
	}

	.inputBox {
		position: relative;
		display: flex;
		align-items: center;
		margin-top: 20px;

		.searchinput {
			width: 520rpx;
			height: 72rpx;
			display: inline-block;
			vertical-align: middle;
			border-radius: 20px;
			font-size: 28rpx;
			color: #737373;
			padding-left: 60rpx;
			background-color: #fff;
		}

		.search-icon {
			position: absolute;
			left: 20rpx;
		}

		.searchbtn {
			width: 132rpx;
			height: 72rpx;
			text-align: center;
			line-height: 66rpx;
			border-radius: 36rpx;
			font-size: 28rpx;
			color: #ffffff;
			margin-left: 20rpx;
			background-image: linear-gradient(270deg, #cc875b 0%, #7e4826 100%) !important;
		}

		.inputpc {
			padding-left: 20rpx;
			color: #cccccc;
		}
	}

	.grid-text {
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 26rpx;
		background-color: #fff;
		border-radius: 60rpx;
		color: #666666;
		margin-bottom: 10px;
		font-size: 12px;
		min-width: 50px;
		text-align: center;
	}

	.grid-text-active {
		background-image: linear-gradient(270deg, #cc875b 0%, #7e4826 100%) !important;
		color: #fff;
	}

	/* 选手 */
	.person {
		width: 100%;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
		background: #fff;
		margin-bottom: 15px;
		position: relative;

		.person_code {
			position: absolute;
			left: 0px;
			top: 0rpx;
			font-size: 24rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.3);
			color: #fff;
			width: 98rpx;
			height: 54rpx;
			line-height: 54rpx;
			border-radius: 16rpx 0 8rpx 4px;
			z-index: 999;
		}

		.person_image {
			display: block;
			width: 100%;
		}

		.person_footer {
			padding: 5px 10px;
		}
	}
</style>
